<template>
    <div class="reflect_page">
      <van-nav-bar
        title="提现"
        left-arrow
        @click-left="$router.back()"
        left-text="返回"
      />
      <van-form @submit="onSubmit">
        <van-field autocomplete="off" name="intoWay"
                   label="提现到"
                   required
                   :rules="[{ required: true, message: '未选择提现方式' }]"
        >
          <template #input>
            <van-radio-group @change="radioChange" v-model="intoWay" direction="horizontal">
              <van-radio name="wechat">微信</van-radio>
              <!-- <van-radio name="alipay">支付宝</van-radio> -->
            </van-radio-group>
          </template>
        </van-field>
        <van-field autocomplete="off"
          type="number"
          v-model="money"
          name="money"
          label="提现金额"
          placeholder="请输入提现金额"
          required
          :rules="[
            { required: true, message: '请输入提现金额' },
            { message: '只能输入2位小数的正数', pattern}
          ]"
        />
        <van-field autocomplete="off"
          v-model="payPwd"
          type="password"
          name="payPwd"
          label="支付密码"
          placeholder="请输入隐私密码"
          required
          :rules="[{ required: true, message: '隐私密码必须输入！' }]"
        />
        <van-field autocomplete="off"
          type="text"
          name="account"
          :label="intoWay == 'wechat' ? '提现到微信号' : '提现到支付宝'"
          
          :placeholder="intoWay == 'wechat' ? '输入收款人常用的微信号' : '输入收款人常用的支付宝'"
        >
        <template #input>
            <div>
              {{cashwechat}}
            </div>
          </template>
        </van-field>
        <van-field autocomplete="off"
          type="number"
          name="wxPhone"
          :label="intoWay == 'wechat' ? '提现到绑定微信的手机号' :'提现到绑定支付宝的手机号'"
          
          :placeholder="intoWay == 'wechat' ? '请输入绑定收款人常用微信的手机号': '请输入绑定收款人常用支付宝的手机号'"
        >
          <template #input>
            <div>
              {{wxPhone}}
            </div>
          </template>
        </van-field>
        <van-field autocomplete="off" name="intoWay"
            :label="intoWay == 'wechat' ? '提现到微信收款二维码' : '提现到支付宝收款二维码'"
        >
          <template #input>
            <div>
              <van-image
                cover
                width="1.1rem"
                height="1.1rem"
                :src="avatar"
              />
            </div>
          </template>
        </van-field>
        
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            确定提现
          </van-button>
        </div>
        <div class="setWithdraw" @click="setWithdraw()">前往提现设置>></div>
        </van-form>
        
    </div>
</template>

<script>
  import {Toast} from 'vant';
  import {mapGetters} from 'vuex';
  const cashWay = {
    card: '银行卡',
    wechat: '微信',
    qq: 'QQ',
    alipay: '支付宝',
  };

  export default {
    name: 'withdraw',
    data(){
      return{
        avatar:'',
        cashWay,
        money:'',
        cashwechat:'',
        intoWay:"wechat",
        name:'',
        account:'',
        payPwd: '',
        pattern:  /^[0-9]+(\.[0-9]{0,2})?$/,
        cashOutSign: '',
      }
    },

    created(){
      var obj = this.allUserInfo.cashtype.split(",");
      if(this.allUserInfo.cashtype && obj.length>0){
        
        this.intoWay = obj[0]
        if(obj[0] == "wechat"){
          this.cashwechat = this.allUserInfo.cashwechat
          this.wxPhone = this.allUserInfo.cashwechatmobilephone
          this.avatar = this.allUserInfo.cashwechatavatar
        }else{
          this.cashwechat = this.allUserInfo.cashalipay
          this.wxPhone = this.allUserInfo.cashalipaymobilephone
          this.avatar = this.allUserInfo.cashalipayavatar
        }
      }else{
        this.intoWay = this.allUserInfo.cashtype
        if(this.intoWay == "wechat"){
          this.cashwechat = this.allUserInfo.cashwechat
          this.wxPhone = this.allUserInfo.cashwechatmobilephone
          this.avatar = this.allUserInfo.cashwechatavatar
        }else{
          this.cashwechat = this.allUserInfo.cashalipay
          this.wxPhone = this.allUserInfo.cashalipaymobilephone
          this.avatar = this.allUserInfo.cashalipayavatar
        }
      }
      
      if (this.$route.params.id){
        this.cashOutSign = this.$route.params.id
      } else {
        //this.$router.back()
      }
    },
    computed: {
      ...mapGetters(['allUserInfo']),
    },
    methods:{
      radioChange(e){
        if(e == "wechat"){
          this.cashwechat = this.allUserInfo.cashwechat
          this.wxPhone = this.allUserInfo.cashwechatmobilephone
          this.avatar = this.allUserInfo.cashwechatavatar
        }else{
          this.cashwechat = this.allUserInfo.cashalipay
          this.wxPhone = this.allUserInfo.cashalipaymobilephone
          this.avatar = this.allUserInfo.cashalipayavatar
        }
      },
      onRead(file) {
        console.log(file)
      },
      async onSubmit(values){
        
        if(!this.wxPhone){
          console.log('wx')
          Toast('暂未设置绑定微信的手机号，请前往提现设置')
          return
        }
        if(!this.cashwechat){
          console.log('zfb')
          Toast('暂未设置微信号，请前往提现设置')
          return
        }
        let _self = this
        let url = 'api/stock/cash'
        const params = {
          money: values.money*1000,
          paypassword: this.$Base64.encode(this.$md5(values.payPwd) + this.$md5('jinpin888')),
          avatar: _self.allUserInfo.cashwechatavatar,
          account: _self.allUserInfo.cashwechat,
          cashid: _self.allUserInfo.cashwechat,
          cashmobilephone: _self.allUserInfo.cashwechatmobilephone,
          cashtype: _self.intoWay
        };
        const res = await _self.$api.stock.reqDrawCash(url,params)
        console.log(res)
        if(res.code == 200){
          Toast('提交成功!')
          setTimeout(function(){
            _self.$router.back()
          },1000)
        }
      },

      setWithdraw(){
        this.$router.push('/setcashinfo')
      }

    }
  }
</script>

<style scoped>
.setWithdraw{
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  color:red;
}
</style>
